<template>
    <div class="select-for-data">
        <div class="select-container"  tabindex = "20" v-focus="open" @blur="close" @mousewheel.stop>
            <!-- 下拉图标按钮 -->
            <div class="toggle-select" @click="toggleSelect" :class="{'disable' : this.options.length === 0 && !this.hasNull}">
                {{currentOption.label || currentOption}}
                <i class="iconfont icon-caret-down" :class="[open ? 'open' : 'close']" v-show="!hideDropIcon"></i>
            </div>
            <!-- 选项下拉面板 -->
            <transition name="spread" >
                <div class="options-container" :class="{'menu-direction': menuUp}" v-show="open" >
                    <g-scrollbar class="option-scrollbar">
                        <div v-if="hasNull" class="option" :class="{'active-option': currentOption == '无'}" @click="selectOption()">无</div>
                        <div v-for="(option, index) in options" :key="index"
                            class="option"
                            :class="{'active-option': option == currentOption}"
                            @click="selectOption(option)" >
                            {{option.label}}
                        </div>
                    </g-scrollbar>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>

    import GScrollbar from './g-scrollbar'
    import Bus from '../../utils/event_bus'

    export default {

        props: {
            options: Array,
            hasNull: {
                type: Boolean,
                default: false,
            },
            selectedOption: Object, // 选中的option
            hideDropIcon: false,
            menuDirection: {
                type: Boolean,
                default: false
            }
        },

        data: function() {
            return {
                open:false,
                menuUp: this.menuDirection,
                currentOption: '',
            }
        },

        components: {
            GScrollbar
        },

        created: function() {

            Bus.$on('data-categorys-select-close', () => {
                this.open = false;
            });

        },

        mounted: function() {

            // 如果组件初始化时，用户未指定应该选定的option，默认选定第一个option
            if (this.selectedOption) {
                this.currentOption = this.selectedOption;
            } else {
                this.currentOption = this.options[0] || '无相关字段';
            }

            if (this.hasNull) {
                this.currentOption = '无';
            }

            return;
        },

        directives: {
            focus: {
                componentUpdated: function (el, {value}) {
                    if (value) {
                        el.focus();
                    }
                }
            }
        },

        methods: {
            toggleSelect() {

                if (this.options.length === 0 && !this.hasNull) {
                    return;
                }

                this.open = !this.open;

            },

            close() {
                this.open = false;
            },

            selectOption(option) {
                this.currentOption = option ? option : '无';
                this.close();
            }
        },

        watch: {

            options() {
                if (!this.hasNull) {
                    this.currentOption = this.options[0] || '无相关字段';
                }
            },

            currentOption() {
                this.$emit('option-select', this.currentOption.value, this.currentOption.label);
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss">

    @import "common";

    $gSelectMaxHeight: 180px;

    .select-for-data{

        .select-container{

            cursor: pointer;
            outline-style: none;

            .toggle-select{
                width: 100%;
                height: 28px;
                padding: 4px 8px;
                border: 1px solid $bdGray;
                border-radius: $bdRadius;
                cursor: pointer;
                overflow: hidden;
                @include text-overflow;

                >i{
                    float: right;
                    @include transition(all .5s);
                }

                .open {
                    @include transform(rotate(180deg) translateY(6%));
                }

                .close {
                    @include transform(translateY(20%));
                }

                &.disable {
                    cursor: not-allowed;
                    background-color: lighten($bdGray, 4%);
                }
            }

            .options-container{
                max-width: 240px;
                min-width: 120px;
                max-height: $gSelectMaxHeight;
                padding: 4px;
                border: 1px solid $bdGray;
                border-radius: $bdRadius;
                background-color: $bgWhite;
                box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
                margin-top: 2px;
                overflow: hidden;
                position: absolute;
                z-index: 999;

                .option-scrollbar {
                    height: $gSelectMaxHeight;
                    .option {
                        width: 100%;
                        padding: 4px;
                        overflow: hidden;
                        @include text-overflow ;
                        cursor: pointer;

                        &:hover{
                            background-color: $bgOption;
                        }

                        &.active-option{
                            background-color: $bgOption;
                        }
                    }

                }

            }

            .menu-direction {
                bottom: 36px;
            }
        }
    }

    .spread-enter-active {
        @include animation(spread-in .3s);
    }
    .spread-leave-active {
        @include animation(spread-out .3s);
    }

    @include keyframes(spread-in){
        0% {max-height: 0}
        100% { max-height: auto}
    }

    @include keyframes(spread-out){
        0% {max-height: auto}
        100% { max-height: 0}
    }

</style>
